<!-- 主题感知按钮组件示例 -->
<template>
  <el-button 
    v-bind="$attrs"
    @click="handleClick"
    :type="computedType"
    :class="computedClass"
  >
    <slot />
  </el-button>
</template>

<script setup>
import { computed } from 'vue'
import { useTheme } from '@/composables/useTheme'

// 🎯 组件属性
const props = defineProps({
  /**
   * 按钮类型，支持主题感知
   * - 'theme-primary': 跟随主题色的主要按钮
   * - 其他值: 直接传递给 Element Plus
   */
  type: {
    type: String,
    default: 'default'
  },
  /**
   * 是否启用主题感知样式
   */
  themeAware: {
    type: Boolean,
    default: true
  }
})

// 🎯 事件定义
const emit = defineEmits(['click'])

// 🎯 主题状态（只在需要时获取）
const { isDark } = useTheme()

// 🎯 计算属性：智能类型转换
const computedType = computed(() => {
  // 特殊类型转换
  if (props.type === 'theme-primary') {
    return 'primary'  // 转换为 Element Plus 的 primary 类型
  }
  return props.type
})

// 🎯 计算属性：主题感知样式类
const computedClass = computed(() => {
  if (!props.themeAware) return ''
  
  const classes = []
  
  // 根据深色模式添加特殊样式
  if (isDark.value) {
    classes.push('theme-button--dark')
  } else {
    classes.push('theme-button--light')
  }
  
  return classes.join(' ')
})

// 🎯 点击处理
const handleClick = (event) => {
  emit('click', event)
}
</script>

<style scoped>
/* 🎨 主题感知样式（可选） */
.theme-button--light {
  /* 浅色模式特殊样式 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-button--dark {
  /* 深色模式特殊样式 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 🔥 hover 效果增强 */
:deep(.el-button:hover) {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}
</style>
